<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"  %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<!-- header -->
<div class="modal-header">
	<!-- 닫기(x) 버튼 -->
	<button type="button" class="close" data-dismiss="modal">×</button>
	<!-- header title -->
	<h4 class="modal-title">상품 검색</h4>
</div>

<div class="modal-body">
				
	<div class="row">

		<div class="col-lg-12">
			
			<div id="alert_placeholder" style="display:none;"></div>
			
			<form id="searchform" name="searchform">
			<div class="panel panel-success">
				<div class="panel-heading">
					검색 조건
				</div>
				<div class="panel-body">
					<div class="row" >
	                	<div class="col-lg-4">
		                		<div class="input-group">
		                			<span class="input-group-addon"><i class="fa fa-key fa" style="width:15px;"></i></span>
		                           	<input class="form-control"  id="prd_id" name="prd_id" placeholder="상품 아이디" />
								</div>
	                	</div>
	                	<div class="col-lg-4">
			                	<div class="input-group">
			                		<span class="input-group-addon"><i class="fa fa-tag fa" style="width:15px;"></i></span>
		                            <input class="form-control"  id="prd_name" name="prd_name" placeholder="상품명" />
								</div>
						</div>
	                	<div class="col-lg-4" style="text-align: right;">
	                		<button type="reset" class="btn btn-default" onclick="$('#prd_customer').val(''); $('#prd_customer_name').attr('readonly', false);">비우기</button>
	                		<button id="searchBtn" type="button" class="btn btn-warning" >검색</button>
	                	</div>
	                </div>
				</div>
			</div>
			</form>
				 <div class="dataTable_wrapper">
				 	<table class="table table-striped table-bordered table-hover" id="datatable_list">
				 		<thead>
                            <tr>
                                <th><i class="fa fa-key fa" style="width:15px;"></i>아이디</th>
                                <th><i class="fa fa-tag fa" style="width:15px;"></i>상품명</th>
                                <th>품목</th>
                                <th>색상</th>
                                <th>규격</th>
                                <th>단가</th>
                                <th>납입처</th>
                                <th>납입처</th>
                            </tr>
                        </thead>
				 	</table>
				 </div>
			</div>
		</div>
	</div>
	
<script>
	
	$(document).ready(function() {
		
		var oTable = $('#datatable_list').dataTable({
			columnDefs:[
	
	            {data: "PRD_ID", 			visible:true,	targets:0  },
	            {data: "PRD_NAME", 			visible:true,	targets:1  },
	            {data: "PRD_TYPE_NAME", 	visible:true,	targets:2  },
	            {data: "PRD_COLOR_NAME", 	visible:true,	targets:3  },
	            {data: "PRD_SIZE_NAME", 	visible:true,	targets:4  },
	            {data: "PRD_UNIT_PRICE", 	visible:true,	targets:5  },
	            {data: "CUS_NAME",			visible:true,	targets:6  },
	            {data: "CUS_ID",			visible:false,	targets:7  }
	        ],
			bServerSide: true,
	    	bProcessing: true,
	    	bDeferRender: true,
	    	bAutoWidth: false,
	    	bRetrieve: true,
	    	bFilter: false,
	    	bInfo: true,
	    	searching: false,
	    	iDisplayLength : 5,
	    	lengthMenu: [10, 15, 20, 25, 30, 35, 40, 45, 50, 100],
	    	pagingType: "full_numbers",
	    	aaSorting: [[ 0, "desc" ]],
	    	language: {
	            emptyTable: "<spring:message code='brd.no.record' />",
	            info: "Total Record : _MAX_"
	        },
	        sAjaxSource: "/product/listData.json",
	        fnServerParams: function(aoData) {
	            var serializedForm = $('#searchform').serializeArray();
	            for (var n in serializedForm) {
	               var tmpobj = serializedForm[n];
	               var key = tmpobj['name'];
	               var value = tmpobj['value'];
	               aoData.push({"name":key,"value":value});
	            }
	        },
	        fnServerData: function ( sSource, aoData, fnCallback, oSettings ) {
	            oSettings.jqXHR = $.ajax( {
	              dataType: 'json',
	              type: "GET",
	              url: sSource,
	              data: aoData,
	              success: fnCallback,
	              error: function (e) {
	            	  bs_alert.modal("<spring:message code='comm.session.expire' />", "info","LOGOUT");
	              }
	            });
	        },
	    	fnRowCallback: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
	    		$('td:eq(5)', nRow).css('text-align', 'right');
	    		$('td:eq(5)', nRow).html('<i class="fa fa-won fa" style="width:15px;"></i>&nbsp;' + commaValue(aData.PRD_UNIT_PRICE));
	    		
	    	}
	        ,oTableTools: {
	            sRowSelect: "single",
	            aButtons: [ 
							/* { sExtends :'select_all' , 	sButtonText:'전체 선택' },
							{ sExtends :'select_none' , sButtonText:'전체 해제' }, */
							{ sExtends :'xls' , 		sButtonText:'엑셀 다운로드', 		sFileName: '*.xls' },
							{ sExtends :'copy' , 		sButtonText:'복사' }
       				],
	            fnRowSelected: function(node) {
	            	
	            	var aData = oTable.fnGetData(node);
	            	
	            	$('#form').find('#prd_id').val(aData.PRD_ID);
	            	$('#form').find('#cus_id').val(aData.CUS_ID);
	            	$('#form').find('#prd_name').val(aData.PRD_NAME);
	            	$('#form').find('#ord_unit_price').val(aData.PRD_UNIT_PRICE);
	            	
	            	if (aData.PRD_UNIT_PRICE != undefined && aData.PRD_UNIT_PRICE != '') {
	            		comma($('#form').find('#ord_unit_price'));
	            	}
	            	
	            	$('#prd_id_desc').html("* 상품 : <strong>" + aData.PRD_ID + "</strong>");
	            	
	            	$('#layerpop').modal('toggle');
	            }
	        }
	        ,dom: '<"top"<"row"<"col-lg-6 text-left hide"T><"col-lg-6 text-right">>>rt<"bottom"<"row"<"col-lg-2 text-left"i><"col-lg-10 text-right"p>>>'
		});
	
	   	$('.form-control').keypress(function (e) {
			if (e.which == 13) {
				$('#searchBtn').trigger("click");
			}
	   	});
	    
		$('#searchBtn').click(function() {
					
			oTable.fnReloadAjax();
			
	    });
		
	});
	

</script>
